<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-alert
          :closable="false"
          title="购前须知"
          type="info"
          description="本产品不提供香港、澳门、台湾、国外等节点，仅提供国内区域ip切换。"
          show-icon/>
        <el-alert
          :closable="false"
          title="违法警告"
          type="error"
          description="本产品禁止用于任何违法违规业务。"
          show-icon/>
      </el-col>
    </el-row>

    <el-row>
      <el-form ref="orderForm" :inline="true" :model="orderForm" size="medium" label-width="100px" label-position="right">
        <el-row>
          <el-form-item label="充值金额" prop="order_money">
            <el-radio-group v-model="orderForm.order_money">
              <el-radio :label="100">100</el-radio>
              <el-radio :label="500">500</el-radio>
              <el-radio :label="1000">1000</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="支付方式" prop="pay_type">
            <el-radio-group v-model="orderForm.pay_type" @change="handlePayChange">
              <el-radio :label="1"><svg-icon icon-class="alipay" style="font-size: 28px;"/></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item style="margin-left:50px;">
            <el-button type="primary" size="medium" @click="onSubmit">确定充值</el-button>
            <el-button type="info" size="medium" style="margin-left:20px;" @click="orderFormReset('orderForm')">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Charge',
  components: {},
  data() {
    return {
      orderForm: {
        order_money: null,
        pay_type: 1
      }
    }
  },
  methods: {
    handlePayChange(v) {
      this.orderForm.pay_type = v
    },
    orderFormReset(name) {
      this.$refs[name].resetFields()
    },
    onSubmit() {
      console.log(this.orderForm)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
